<template>
  <div>
    <div class="space"></div>
    <div class="item" v-for="(item,index) of list" :key="index">
      <div class="title border-bottom" @click="isClick()">
        <span class="icon-ticket"></span>
        {{item.title}}
        <span v-show="!item.children" class="list-price">
          <span class="price-icon">&yen;</span>{{item.price}}
        </span>
        <span class="iconfont icon-jiantouxia" v-if="down" v-show="item.children"></span>
        <span class="iconfont icon-jiantoushang" v-else v-show="item.children"></span>
      </div>
      <fade>
        <div
          v-if="item.children"
          class="children"
          v-show="isShow"
        >
          <div class="item" v-for="(item,index) of item.children" :key="index">
            <div class="title border-bottom" >
              {{item.title}}
              <span class="list-price">
                <span class="price-icon">&yen;</span>{{item.price}}
              </span>
            </div>
          </div>
        </div>
      </fade>
    </div>
    <div class="space">

    </div>
  </div>
</template>

<script>
  import fade from 'common/fade/fade'
  export default {
    name: "detailList",
    components:{
      fade
    },
    props:{
      list:Array
    },
    data(){
      return{
        isShow:false,
        down:true,
      }
    },
    methods :{
      isClick(){
        this.isShow = !this.isShow
        this.down =!this.down
      }

    }
  }
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .space
    height .8rem
  .title
    height: .8rem
    line-height:.8rem
    font-size .32rem
    padding 0 .2rem
    overflow: hidden
    .list-price
      float: right
      color #ff9800
      text-align center
      width .8rem
      .price-icon
        font-size .26rem
    .iconfont
      color $bgColor
      font-size .24rem
      float: right
      margin-right:.5rem
    .icon-ticket
      position: relative
      left: .06rem
      top .06rem
      display: inline-block;
      width: .36rem;
      height: .36rem;
      background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
      margin-right: .1rem;
      background-size: .4rem 3rem
  .children
    background: #f5f5f5
    padding-left .8rem
    font-size .28rem
    overflow: hidden

</style>
